<template>
  <div class="container">
    <!-- <div class="item">
      <div class="title">苏州园区金鸡湖大酒店有限公司</div>
      <div class="height"></div>
      <div class="tips">食安指数</div>
      <div class="number_wapper">
        <div class="number" :style="{color:color}">98</div>
        <div class="date">2020-09-01评估完成</div>
      </div>
      <div class="progress">
        <van-progress
          :percentage="percentage"
          :color="color"
          stroke-width="16"
          pivot-text="90分"
        />
        <div>100分</div>
      </div>
    </div>
    <div class="height"></div>
    <div class="item">
      <div class="title">营业执照信息</div>
      <van-field
        label-width="8em"
        v-model="message"
        label="统一社会信用代码"
        placeholder=""
      />
      <van-field v-model="message" label="单位名称" placeholder="" />
      <van-field v-model="message" label="单位类型" placeholder="" />
      <van-field v-model="message" label="经营者" placeholder="" />
      <van-field v-model="message" label="核准日期" placeholder="" />

      <van-field v-model="message" label="登记机关" placeholder="" />
      <van-field v-model="message" label="经营场所" placeholder="" />
      <van-field
        v-model="message"
        rows="1"
        autosize
        label="经营范围"
        type="textarea"
        placeholder=""
      />
    </div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      percentage: 90,
      message:""
    };
  },
  created() {},
  computed: {
    color(){
      console.log(this.percentage);
      if (this.percentage >= 90) {
        return "#008000";
      } else if (this.percentage >= 60) {
        return "#ffd700";
      } else {
        return "#ff0000";
      }
    },
   
  },
};
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  padding: $padding;
  background-color: $defaultColor;
  // .item {
  //   padding: $padding;
  //   background-color: $white;
  //   border-radius: 10px;
  // }
  // .title {
  //   font-size: $title;
  //   font-weight: 600;
  //   padding: $padding/2 0;
  // }
  // .tips {
  //   color: $default;
  // }
  // .number_wapper {
  //   display: flex;
  //   align-items: baseline;
  //   .number {
  //     color: $default;
  //     font-size: $largeSize;
  //     margin-right: 10px;
  //     font-weight: 600;
  //   }
  // }
  // .progress {
  //   display: flex;
  //   .van-progress__pivot {
  //     height: 100%;
  //   }
  //   .van-progress {
  //     border-radius: 20px;
  //     flex: 1;
  //     margin-right: 5px;
  //   }
  // }

}
</style>
